<template>
  <div class="absolute right-4 top-4 bg-dark bg-opacity-20 backdrop-blur-sm">
    <img class="w-40" src="@/assets/images/tiny_map_home.png" />
    <img class="radar-icon absolute w-8 origin-bottom" :style="posStyle" src="@/assets/images/rotate.png" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useRoomStore } from '@/stores/useRoomStore'

const store = useRoomStore()
const { room } = storeToRefs(store)
const posStyle = computed(() => {
  const top = room.value!.mapPos.top / 16
  const left = room.value!.mapPos.left / 16
  const rotate = room.value!.mapPos.rotate
  return {
    top: `${top}rem`,
    left: `${left}rem`,
    transform: `rotate(${rotate}deg)`
  }
})
</script>

<style scoped lang="scss">
.radar-icon {
  transform-origin: 50% 90%;
}
</style>